<template>
  <ul class="FixedToolbar" v-if="tools.length > 0">
    <li class="item" :class="item.cssClass" v-for="(item, key) in tools" :key="key" @click="menuClick(item)">
      <img src="item.content" v-if="item.icon"/>
      <span v-text="item.content" v-else/>
    </li>
    <li class="item" @click="toTop">
      <svg t="1690716736187" class="topIcon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="906">
        <path
          d="M925.44 112h-800a40 40 0 0 1 0-80h800a40 40 0 0 1 0 80z m-440 213.28L264.8 547.52a40 40 0 1 1-56.8-56.64L485.44 217.6a59.04 59.04 0 0 1 80 0l265.12 273.28a40 40 0 1 1-56.64 56.64l-208-222.24V952a40 40 0 1 1-80 0z"
          p-id="907" fill="#f4f3f3"></path>
      </svg>
    </li>

    <el-dialog
      title="意见反馈"
      :visible.sync="dialogVisible"
      width="30%">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="closeDialog">确 定</el-button>
  </span>
    </el-dialog>

  </ul>
</template>
<script>
import fa from "element-ui/src/locale/lang/fa";

class Tool {
  constructor({content, icon,}) {
    this.content = content
    this.icon = icon
    this.active = false
  }

  get cssClass() {
    let res = []
    if (this.icon) {
      res.push('icon')
    }
    if (this.active)
      res.push('active')
  }
}

export default {
  data() {
    return {
      tools: [],
      dialogVisible: false,
      input: ""
    }
  },
  created() {
    this.loadToolsConfig()
  },
  methods: {

    closeDialog() {
      if (this.input.length === 0) {
        alert("请输入反馈内容")
        return
      }
      this.dialogVisible = false;
      alert("意见反馈成功")
    },
    menuClick(item) {
      if (item.content === "意见反馈") {
        this.dialogVisible = true
        return
      }
      if (item.content === "商务合作") {
        this.$router.push({
          path: "/shop"
        })
        return;
      }
      if (item.content === "大宗交易") {
        // 使用 Element.scrollIntoView()
        const element = document.getElementById('div_1_1'); // 将 'targetElementId' 替换为你要滚动到的元素的实际 ID
        element.scrollIntoView({
          behavior: 'smooth' // 可选，使滚动平滑进行，默认为 auto
        });
        return;
      }
    },
    toTop() {
      window.scrollTo(0, 0)
    },
    loadToolsConfig() {
      let pageConfig = window.pageConfig
      if (!window.pageConfig || !Array.isArray(pageConfig.GuDingGongJuTiao)) {
        throw new Error('固定工具条未配置')
      }
      let navConfig = pageConfig.GuDingGongJuTiao.map(e => {
        let res = new Tool(e)
        return res
      })
      console.info('固定工具条配置', navConfig)
      this.tools = navConfig
    }
  }
}
</script>
<style lang="less" scoped>
.FixedToolbar {
  position: fixed;
  bottom: 5vh;
  right: 3vw;

  li {
    list-style-type: none;
  }

  .item {
    font-size: 10px;
    font-weight: bolder;
    padding: .5rem;
    width: 2.5rem;
    height: 2.5rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url('');
    color: rgba(223, 219, 219, 0.86);
    margin-bottom: 0.5rem;

    :nth-last-child(1) {
      margin-bottom: 0;
    }

    &:hover {
      cursor: pointer;
    }

    &:hover,
    .active {
      background-image: url('');
      color: rgb(14, 252, 249);
    }
  }
}</style>
